<template>
  <view class="activity-item">
    <image class="activity-item__img" mode="widthFix" v-if="showActivityImg" :src="activityItem?.activityPoster"  >
      <!-- aspectFit|aspectFill|widthFix -->
    </image>
    <text class="activity-item__title">
      {{activityItem.activityName}}
    </text>
    <view class="activity-item__tips">
      <text class="tip" v-if="activityItem.badgeName">
        徽章名称: {{ activityItem?.badgeName }}
      </text>
      <text class="tip"  v-if="activityItem.badgeType">
        徽章类型: {{ activityItem?.badgeType ==0? "个人": "企业" }}
      </text>
      <text class="tip" v-if="activityItem?.applyStartTime">
        报名时间: {{ activityItem?.applyStartTime.substring(0, 16) }} 至 {{ activityItem?.applyEndTime.substring(0, 16) }}
      </text>
      <text class="tip">
        活动时间: {{ activityItem?.activityStartTime.substring(0, 16) }} 至 {{ activityItem?.activityEndTime.substring(0, 16) }}
      </text>
      <text class="tip">
        活动人数: {{ activityItem?.activityPeople }} 人
      </text>
      <text class="tip" v-if="activityItem.activityAddr">
        活动地址: {{ activityItem?. activityAddr}}
      </text>
    </view>
    <slot name="btn-group"/>
  </view>
</template>
<script setup>
import {defineProps, ref} from 'vue'

const props = defineProps({
  showActivityImg:{
    type: Boolean,
    default: true
  },
  activityItem: {
    type: Object,
    default: {}
  }
})
</script>
<style lang="less" scoped>
.activity-item {
  margin-top: 40rpx;
  padding-bottom: 28rpx;
  border-bottom:1px solid @color-border-grey;
  &__img {
	border-radius: 25rpx;
    width: 100%;
    object-fit: fill;
  }
  &__title {
    margin-top: 17rpx;
    font-family:'ali-p';
    font-weight: 500;
    font-size: 31rpx;
	font-weight: bold;
    color: @color-black-text;
  }
  &__tips {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: 'ali-p';
    font-size: 23rpx;
    color:@color-light-grey-text;
    margin-top: 5rpx;
    .tip {
      margin-top: 15rpx;
    }
  }
}
</style>
